<template>
  <div class="todoapp">
    <TodoHeader @taskName="taskNameHandler"></TodoHeader>
    <TodoMain @delTask="delTaskHandler" :list="newList"></TodoMain>
    <TodoFooter @changeTask="changeTaskHandler" :list="newList"></TodoFooter>
  </div>
</template>

<script>
    /*
      需求1：将app.vue的list数据传递到TodoMain中,循环list创建结构
        1.1 在app.vue的data中准备list数据
        1.2 通过v-bind给自定义属性绑定list数据传递给main
        1.3 子组件在props中定义变量list接收父组件传递的数据
        1.4 在main中使用v-for循环创建li
        1.5 给复选框使用v-model绑定完成状态
        1.6 将li固定的css样式通过v-bind绑定完成状态实现点击切换效果

      需求2：在子组件header中输入内容后,传递给父组件,向list新增一条数据
        2.1 在父组件中给子组件占位标签绑定自定义事件-->methods中定义
        2.2 在子组件header中给输入框v-model双向绑定-->变量在data中定义,初始为空
        2.3 给输入框绑定键盘事件keyup监听enter键状态,处理函数中触发父组件的自定义事件
        2.4 父组件的自定义处理函数中,给data中的list新增一条数据,id、name、完成状态

      需求3： 点击main中的删除按钮,将当前点击的li的id子向父传递,父组件通过id删除对应数据
        3.1 给main中的删除按钮绑定点击事件-->触发父组件在main中绑定的自定义事件(传递id)
        3.2 在父组件中给main绑定自定义事件-->处理函数在methods中定义
        3.3 父组件自定义处理函数中,根据传递的id来删除数据

      需求4：统计数量
        4.1 将父组件中的list传递给子组件footer
        4.2 子组件footer显示list的长度

      需求5：点击下方footer组件中的切换栏,点击的按钮添加边框样式
        5.1 给footer组件的每一个选项按钮绑定动态样式-->每个选项有特定的字符串标识,用变量进行存储比对
        5.2 点击事件触发时,改变字符串标识比对变量的值,将当前点击按钮的特点标识字符串赋值给该变量
      
      需求6： main组件中的页面数据需要根据下方footer组件切换选项的状态而展示相应数据
        6.1 通过事件冒泡原理将footer中按钮的点击事件委托给ul处理,子向父传递点击按钮的字符串标识变量
        6.2 子向父传递数据-->1.父组件自定义事件 2.子组件触发自定义事件传参(字符串变量) 3.自定义事件处理函数
        6.3 父组件中的自定义事件处理函数中,需要使用计算属性将传来的参数对list过滤形成新数组,再将新数组返回给data-->变量接收
        6.4 将data中的新数组作为main组件的渲染数据传递出去-->将原list修改为新的数组(剩余条显示数也改为新数组)
    */ 
      


  // 注册局部组件
  import TodoHeader from './components/TodoHeader.vue'
  import TodoMain from './components/TodoMain.vue'
  import TodoFooter from './components/TodoFooter.vue'
export default {
  data(){
    return {
      //  newList:changeTask,
       isSel:'all',
       list: [
        { id: 100, name: "吃饭", isDone: true },
        { id: 201, name: "睡觉", isDone: false },
        { id: 103, name: "打豆豆", isDone: true },
      ],
    }
  },
  methods:{
    taskNameHandler(taskName){
      this.list.push({
        id:this.list[this.list.length-1].id+1,
        name:taskName,
        isDone:false
      })
    },
    delTaskHandler(id){
      const index=this.list.findIndex(item=>item.id===id)
      this.list.splice(index,1)
    },
    changeTaskHandler(isSel){
      this.isSel=isSel
    }
  },
  computed:{
    newList(){
      if(this.isSel=='yes'){
        return this.list.filter(item=>item.isDone)
      }else if(this.isSel=='no'){
        return this.list.filter(item=>!item.isDone)
      }else{
        return this.list
      }
    }
  },
  components:{
    TodoHeader,
    TodoMain,
    TodoFooter
  }
}
</script>

<style scoped>

</style>